import React, { useState, useEffect } from 'react';
import styles from './index.less';

import kls from 'classnames';
import EchartsWrap from '@/components/widgets/EchartsWrap';
import 'echarts-liquidfill/src/liquidFill.js';
// import { useStatisticsData } from '../../index';
import _cloneDeep from 'lodash/cloneDeep';
import { useSelector } from 'umi';

const _data = [
  {
    value: 0,
    title: '未开始',
    icon: require('./images/安全问题未开始.png'),
  },
  {
    value: 100,
    title: '进行中',
    icon: require('./images/安全问题进行中.png'),
  },

  {
    value: 455,
    title: '已完成',
    icon: require('./images/安全问题已完成.png'),
  },
];

const Chart3 = () => {
  const rawData = useSelector(store => store.projectPage.statisticsData);
  const [data, setData] = useState(_data);

  useEffect(() => {
    if (!rawData) {
      return;
    }
    const newData = _cloneDeep(_data);
    // newData[1].value =
    //   rawData.safetyInspectTotalNumber -
    //   rawData.doingSafetyInspectTotalNumber -
    //   rawData.finishedSafetyInspectTotalNumber;
    newData[1].value = rawData.doingSafetyInspectTotalNumber;
    newData[2].value = rawData.finishedSafetyInspectTotalNumber;
    setData(newData);
  }, [rawData]);

  return (
    <div className={styles.box}>
      {data.map(({ icon, title, value }) => {
        return (
          <div className={styles.boxItem}>
            <div className={styles.boxItemImg}>
              <img src={icon} alt="" />
            </div>
            <div className={styles.boxItemNum}>{value}</div>
            <div className={styles.boxItemTitle}>{title}</div>
          </div>
        );
      })}
    </div>
  );
};
export default Chart3;
